<template>
  <div class="" style="height: 100%">
    <commondatatable
      :header="header"
      :datalist="datalist"
      :coltype="coltype"
      :nametype="nametype"
      :dtscrolle="dtscrolle"
    />
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "commondatatablewarn",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      header: [],
      datalist: [],
      coltype: "",
      nametype: "center",
      dtscrolle: 0,
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.queryWarn": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  mounted() {
    this.coltype = this.componentDetail.coltype
      ? this.componentDetail.coltype
      : "";
    this.nametype = this.componentDetail.nametype
      ? this.componentDetail.nametype
      : "center";
    this.dtscrolle = this.componentDetail.dtscrolle
      ? this.componentDetail.dtscrolle
      : 0;
    let unitcolor = "#56C5FA";
    this.header = [
      {
        name: `告警等级`,
        flex: 2,
      },
      {
        name: `告警时间`,
        flex: 2,
      },
      {
        name: `告警来源`,
        flex: 2,
      },
      {
        name: `异常数值`,
        flex: 2,
      },
      {
        name: `告警内容`,
        flex: 2,
      },
    ];
    this.header = this.header.map((item) => {
      item.name = "<div>" + item.name + "</div>";
      return item;
    });
  },
  methods: {
    loadData(data) {
      if (data.length > 0) {
        let aaa = [];
        data.forEach((r) => {
          let riseTime;
          // 处理riseTime， 接口返回发生不一致的情况
          if (r.riseTime.indexOf("+") > 0) {
            riseTime =
              r.riseTime.split("+")[0].split("T")[0] +
              " " +
              r.riseTime.split("+")[0].split("T")[1];
          } else {
            riseTime = r.riseTime;
          }
          let content;
          if (r.code.startsWith("003")) {
            content = r.remark + (r.warnValue > r.value ? "过高" : "过低");
          } else {
            content = r.remark + (r.bound ? "过高" : "过低");
          }
          aaa.push({
            level: `<span class="warn-name" style="border: ${
              "1px solid " + r.levelColor
            };color: ${r.levelColor}">${r.levelName}</span>`,
            riseTime,
            name: r.name,
            warnValue: r.warnValue,
            content,
          });
        });
        this.datalist = aaa;
        this.$nextTick(() => {
          let name = document.querySelectorAll(".warn-name");
          name.forEach((v) => {
            v.style.width = this.getscalepx(60);
            v.style.height = this.getscalepx(20);
            v.style.lineHeight = this.getscalepx(20);
          });
        });
      } else {
        this.datalist = [];
      }
    },
  },
};
</script>
<style lang='scss'
>
.warn-name {
  display: inline-block;
}
</style>